<template>
    <div class="row" v-if="nums > 1">
        <div class="col-md-12">
            <ul class="pagination lms-page">
                <li class="page-item prev" :class="{'disabled-link': current === 1}">
                    <a class="page-link" href="javascript:void(0)" @click="hPrev" tabindex="-1"><i class="fas fa-angle-left"></i></a>
                </li>
                <li v-for="(i,idx) in numList" 
                @click="hClick(i,idx)"
                :key="i" class="page-item" :class="{'active': i === current}">
                    <a class="page-link"  href="javascript:void(0)">{{ i }}</a>
                </li>
                <!-- <li class="page-item">
                    <a class="page-link" href="javascript:void(0)">{{ nums }}</a>
                </li>
                <li class="page-item">
                    <a class="page-link" href="javascript:void(0)">...</a>
                </li>
                <li class="page-item">
                </li> -->


                <li class="page-item prev" :class="{'disabled-link': current === nums}">
                    <a class="page-link" href="javascript:void(0)" @click="hNext"><i class="fas fa-angle-right"></i></a>
                </li>
            </ul>
        </div>
    </div>
</template>

<script setup>

const emit = defineEmits(['update:current','previous','next', 'pageChange'])

const hPrev = () => {
    emit('pageChange', props.current - 1)
}

const hNext = () => {
    emit('pageChange', props.current + 1)
}

const hClick = (page, idx) => {

    if(page === '...' && idx == 1) {
        emit('pageChange', numList.value[2] - 1)
    }
    else if(page === '...' && idx == numList.value.length - 2) {
        console.log(numList.value[numList.value.length - 3])
        emit('pageChange', numList.value[numList.value.length - 3] + 1)
    }
    else hPageChange(page)
}
const hPageChange = (page) => {
    if(page < 1 || page > nums.value)
        return
    if(page === props.current)
        return
    
    emit('pageChange', page)
}

// 实际的最大的页码数
const nums = computed(()=>{
    return Math.ceil(props.total / props.pageSize)
})

const numList = computed(() => {
    if(nums.value < props.pagerCount) {
        return Array.from({length: nums.value}, (_, i) => i+1)
    }
    let start = props.current - Math.floor(props.pagerCount / 2)
    if(start < 1) {
        start = 1
    }
    let end = start + props.pagerCount - 1
    if(end > nums.value) {
        end = nums.value
        start = end - props.pagerCount + 1
    }

    let rs = Array.from({length: end - start + 1}, (_, i) => start + i)
    if(start > 1) {
        rs = [1, '...', ...rs]
    }
    if(end < nums.value - 1) {
        rs = [...rs, '...', nums.value]
    } 
    return rs

    // 返回一个数组，包含从start到end的连续数字
})

const props = defineProps({
    // 总数量
    total: {
        type: Number,
        required: true,
        default: 100
    },
    current: {
        type: Number,
        required: false,
        default: 1
    },
    pageSize: {
        type: Number,
        required: false,
        default: 10
    },
    pagerCount: {
        type: Number,
        required: false,
        default: 9
    }
})
</script>

<style scoped>
.disabled-link {
    pointer-events: none;
    cursor: not-allowed;
    text-decoration: none; /* 可选，去除下划线 */
}
.disabled-link .fas {
    color: #ccc; /* 可选，改变颜色为灰色 */
}
</style>